<template>
    <view class="page column">
        <hj-navbar title="营销中心" />
        <view class="main flex w100 flex-auto">
            <view class="bg big">
                <hj-image mode="aspectFill" src="home-bg.jpg" width="100%" height="100%" />
            </view>
            <view class="content w100 column flex-auto">
                <!-- 头像名称信息 -->
                <UserInfo />
                <!-- 邀请码与操作按钮 -->
                <view class="flex-auto content-box center column">
                    <view class="center column content-box-qrcode pt-18" :class="{ dh: ready }">
                        <hj-image mode="aspectFill" :img="qrcode" width="260rpx" height="260rpx" />
                        <view class="ft-24 t-3 mt-16 line-height1">我的邀请码：YR3uQ</view>
                    </view>
                    <view class="ZKGaoDuanHei t-w line-height1 ft-44 mt-30 mb-30">
                        <view class="content-box-but center" @click="handleSurvey">
                            营销情况概览
                        </view>
                        <view class="content-box-but center mt-30" @click="handleMall">
                            积分商城
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="w100 image">
            <hj-image mode="aspectFill" src="data-bg.jpg" width="100%" height="100%" />
        </view>
    </view>
</template>

<script setup>
/**
 * @description 营销主界面
 * @author yinzhi
 * @date 2025-03-13
 */
import { onReady } from '@dcloudio/uni-app'
import { ref, defineComponent } from 'vue'

// 引入组件
import UserInfo from './components/UserInfo.vue'
defineComponent({
    components: {
        UserInfo
    }
})

// 看后端接口设计，如果用户信息在前面返回则存vuex中在当前页面获取就好，如果在当前页面通过接口请求，则需要引入onLoan事件，初始化的时候获取页面需要的数据

// 推荐二维码
const qrcode = ref(
    ''
)

// 跳转到营销情况概览
const handleSurvey = () => {
    uni.navigateTo({
        url: '/pages/marketing/marketing-situation/index'
    })
}

// 跳转到积分商城
const handleMall = () => {
    uni.navigateTo({
        url: '/pages/goods/goods-list/index'
    })
}

// 页面是否已准备好，主要用于控制二维码动画效果
const ready = ref(false)
onReady(() => {
    ready.value = true
})
</script>

<style scoped lang="scss">
.content-box {
    padding: 20rpx 40rpx;
    &-qrcode {
        width: 360rpx;
        height: 370rpx;
        border-radius: 30rpx;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px 0px;
        border: 1px solid #999;
        background: $uni-bg-color;
        transition: all 1800ms;
        transform: translateY(100vh);
        position: relative;
        z-index: 10;
    }
    &-qrcode.dh {
        transform: translateY(0);
    }
    &-but {
        width: 420rpx;
        height: 88rpx;
        border-radius: 44rpx;
        border: 2rpx solid #fff;
        background: #608196;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px 0px;
    }
}
.main {
    position: relative;
    .content {
        position: relative;
        z-index: 10;
    }
    .bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        opacity: 0.6;
    }
}
.image {
    height: 30vh;
}
</style>
